<template>
  <div class="customer-info">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]">
        <el-card shadow="hover">
          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
            <el-form-item label="拜访客户">
              <el-input v-model="queryParams.customName" placeholder="请输入拜访客户" clearable style="width: 150px" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="客户经理">
              <el-input v-model="queryParams.visitor" placeholder="请输入客户经理" clearable style="width: 150px" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="time"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                @change="changeTime"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>
    <el-card class="info-box" v-loading="loading">
      <template #header>
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button type="primary" @click="handleExport" v-has-permi="['wiki:record:export']" icon="Download"> 导出数据 </el-button>
          </el-col>
        </el-row>
      </template>

      <el-table
        :key="updateKey"
        :data="customerData"
        style="width: 100%; height: calc(100% - 40px)"
        @sort-change="sortChange"
        :default-sort="defaultSort"
        ref="customTable"
      >
        <el-table-column label="序号" type="index" align="center" width="60" />
        <el-table-column label="客户经理" prop="visitor" align="center" show-overflow-tooltip />
        <el-table-column label="拜访时间" prop="visitDate" align="center" show-overflow-tooltip sortable="custom" />
        <el-table-column label="拜访客户" prop="customName" align="center" show-overflow-tooltip />
        <el-table-column label="拜访对象" prop="visitees" align="center" show-overflow-tooltip />
        <el-table-column label="同行人" prop="peersName" align="center" show-overflow-tooltip />
        <el-table-column label="操作" align="center" width="180">
          <template #default="scope">
            <el-tooltip content="详情" placement="top">
              <el-button link type="primary" icon="Document" @click="toDetail(scope.row)" />
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="deleteItem(scope.row)" v-has-permi="['wiki:record:remove']" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-if="!customerData.length" description="暂无数据"></el-empty>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getCustomList"
      />
    </el-card>
  </div>
</template>
<script setup lang="ts">
import {defineComponent, ref} from "vue";
import {useRouter} from "vue-router";
import {customerDetail} from "@/views/customerInformation/customerService";
import {deleteRecord, recordList} from "@/api/visitRecords";

const router = useRouter();
const loading = ref(false);
const customerData = ref<Record<string, any>[]>([]);
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const total = ref(0);
const time = ref<any>([]);
const initForm = () => {
  return {
    pageNum: 1,
    pageSize: 10,
    customName: '',
    visitor: '',
    beginVisitDate: '',
    endVisitDate: '',
    orderByColumn: 'visitDate',
    isAsc: 'DESC'
  }
}
const customTable = ref<any>();
const defaultSort = ref({prop: 'visitDate', order: 'descending'});
const queryParams = ref(initForm());
const updateKey = ref(0);

function changeTime(val: any) {
  queryParams.value.beginVisitDate = val ? val[0] : '';
  queryParams.value.endVisitDate = val ? val[1] : '';
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  getCustomList();
}

function resetQuery() {
  time.value = null;
  queryParams.value = initForm();
  updateKey.value = Math.random();
  getCustomList();
}

function toDetail(item: any) {
  router.push({
    name: 'recordDetail',
    query: {id: item.id, customId: item.customId}
  })
  customerDetail.value = item
}

async function deleteItem(item: any) {
  try {
    await proxy?.$modal.confirm('是否确认删除该条拜访记录？')
    const data = await deleteRecord(item.id)
    if (data.code === 200) proxy?.$modal.msgSuccess('删除成功')
    getCustomList()
  } catch (error) {
    console.log(error)
  }
}

function handleExport() {
  proxy?.download("wiki/record/export", {}, `拜访记录_${new Date().getTime()}.xlsx`);
}

function sortChange(column: any) {
  if (column.prop === 'visitDate') queryParams.value.isAsc = column.order ? column.order === 'descending' ? 'DESC' : 'ASC' : ''
  getCustomList()
}

function getCustomList() {
  loading.value = true;
  recordList(queryParams.value).then((res) => {
    customerData.value = res.rows || [];
    total.value = res.total || 0;
  }).finally(() => loading.value = false);
}

getCustomList();

defineComponent({name: 'VisitRecordsIndex'})
</script>

<style scoped lang="scss">
.customer-info {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 60px;

  .back {
    position: relative;
    margin-top: 20px;
    padding-left: 40px;
    color: #FF4350;
    cursor: pointer;

    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 10px;
      width: 20px;
      height: 12px;
      background: url('../../assets/arrow.png') no-repeat center;
      transform: translateY(-50%) scaleX(-1);
    }
  }

  .info-box {
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding: 15px;
    background: #fff;

    .info-list {
      //width: 100%;
      display: flex;
      flex-wrap: wrap;

      .info-item {
        position: relative;
        width: calc((100% - 32px) / 3);
        height: 206px;
        margin-right: 16px;
        margin-bottom: 16px;
        padding: 0 10px;
        background-color: #f9f9f9;
        cursor: pointer;

        &:nth-child(3n) {
          margin-right: 0;
        }

        .item-header {
          width: 100%;
          height: 60px;
          padding-left: 10px;
          padding-right: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          color: #2E3244;
          border-bottom: 1px solid rgba(187, 187, 187, 0.5);

          .item-info {
            width: 100%;
            display: flex;
            align-items: center;

            .el-avatar {
              margin-right: 10px;
            }

            .name {
              width: calc(100% - 80px);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }

        .item-main {
          padding: 10px;
          font-size: 14px;
          overflow: hidden;

          .intro {
            margin-top: 10px;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
